import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4

import "../../../../Base/UiBase"
import "../../../../Base/Config"
import "../../../../Base/UiBase/TC" as TC

import Code 1.0
import Cpp.Type 1.0

Rectangle {
    id: root
    property int postId
    property string text
    property url source
    property string type: "image"

    color: Color.background

    MouseArea {
        anchors.fill: parent
        z: -1
    }
    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        Rectangle {
            // top block
            Layout.fillWidth: true
            Layout.preferredHeight: 96 * Size.ratio
            color: Color.foreground

            MouseArea {
                width: parent.height
                height: parent.height

                onClicked: root.visible = false
                Rectangle {
                    anchors.fill: parent
                    color: Color.pressed
                    visible: parent.pressed
                }
                Image {
                    anchors.centerIn: parent
                    sourceSize.width: 80 * Size.ratio
                    sourceSize.height: 96 * Size.ratio
                    source: "../../../../../resources/comment/fanhiu01.svg"
                }
            }

            Text {
                // title
                text: "点评"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Size.titleFont
            }
            BottomDivider {
            }
        }
        // post description body
        ImageBody {
            Layout.fillWidth: true
            text: root.text
            source: visible ? root.source : ""
            visible: root.type === "image"
        }
        MusicBody {
            Layout.fillWidth: true
            text: root.text
            source: visible ? root.source : ""
            visible: root.type === "audio"
        }
        Foot {
            Layout.fillWidth: true
            BottomDivider {
            }
        }

        // comments body
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            z: -1

            color: Color.background

            ListView {
                anchors.fill: parent
                spacing: 0
                delegate: Comment {
                    commentId: model.commentId
                    username: model.username
                    subject: model.subject
                    time: model.time
                    comment: model.comment
                    upNumber: model.upNumber
                    up: model.up
                }
                model: listmodel
            }

            BottomDivider {
            }
        }

        Rectangle {
            // bottom block
            Layout.fillWidth: true
            Layout.preferredHeight: inputBody.padding * 2 + input.height
            Layout.alignment: Qt.AlignBottom
            color: Color.thirdColor

            RowLayout {
                spacing: 0
                anchors.fill: parent
                anchors.verticalCenter: parent.verticalCenter

                Item {
                    // left margin
                    Layout.fillHeight: true
                    Layout.preferredWidth: 20 * Size.ratio
                }

                // input body
                Rectangle {
                    id: inputBody

                    property double padding: 25 * Size.ratio

                    Layout.preferredHeight: input.height
                    Layout.fillWidth: true

                    radius: 10 * Size.ratio
                    color: Color.foreground

                    TC.TextEdit {
                        id: input

                        onTextChanged: {
                            if (length > Numeral.maxPostTextLength) {
                                text = text.substring(0,
                                                      Numeral.maxPostTextLength)
                                input.cursorPosition = input.length
                            }
                        }

                        height: font.pixelSize + topPadding + bottomPadding
                        width: parent.width
                        padding: inputBody.radius

                        font.pixelSize: Size.normalFont

                        wrapMode: TextInput.WrapAnywhere
                        selectByMouse: true
                        selectByKeyboard: true
                        Text {
                            anchors.fill: parent
                            text: "来说点儿什么吧"
                            font: parent.font
                            color: Color.virtualInput
                            padding: parent.padding
                            visible: parent.length === 0
                        }
                    }
                }
                Item {
                    // send button
                    Layout.alignment: Qt.AlignRight
                    Layout.fillHeight: true
                    Layout.preferredWidth: 150 * Size.ratio
                    ImageButton {
                        anchors.centerIn: parent
                        width: 90 * Size.ratio
                        height: 60 * Size.ratio
                        enabled: input.length !== 0
                        source: {
                            if (!enabled)
                                return "../../../../../resources/comment/fasong01.svg"
                            return pressed ? "../../../../../resources/comment/fasong03.svg" : "../../../../../resources/comment/fasong02.svg"
                        }
                        onClicked: {
                            listmodel.append({
                                                 commentId: 100,
                                                 username: "HappyZh",
                                                 subject: Subject.Music,
                                                 comment: input.text,
                                                 time: new Date(),
                                                 up: false,
                                                 upNumber: 0
                                             })
                            input.text = ""
                        }
                    }
                }
            }
        }
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: Size.keyboard.height
        }
    }
    ListModel {
        id: listmodel
        Component.onCompleted: {
            listmodel.append({
                                 commentId: 1,
                                 username: "HappyZh",
                                 subject: Subject.Music,
                                 time: new Date(),
                                 comment: "model.comment",
                                 upNumber: 100,
                                 up: false
                             })
        }
    }
}
